<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			
			<view class="title">我的租赁申请</view>
		</view>
		
		<!-- 状态切换 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				<text>{{ tab.name }}</text>
				<text class="tab-badge" v-if="tab.count > 0">{{ tab.count }}</text>
			</view>
		</view>
		
		<!-- 申请列表 -->
		<view class="application-list">
			<!-- 有数据时显示列表 -->
			<view v-if="applications.length > 0" class="list-content">
				<view 
					class="application-item" 
					v-for="(item, index) in applications" 
					:key="index"
					@click="viewApplicationDetail(item)"
				>
					<view class="item-header">
						<text class="application-id">申请编号：{{ item.application_id }}</text>
						<text class="application-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
					</view>
					
					<view class="housing-info">
						<view class="housing-title">{{ item.unit.unit_number }}</view>
						<view class="housing-detail">
							<view class="detail-item">
								<text class="label">位置：</text>
								<text class="value">{{ item.unit.building }} {{ item.unit.floor }}</text>
							</view>
							<view class="detail-item">
								<text class="label">面积：</text>
								<text class="value">{{ item.unit.actual_area }} ㎡</text>
							</view>
							<view class="detail-item">
								<text class="label">租金：</text>
								<text class="value price">{{ item.unit.rental_price }} 元/㎡/月</text>
							</view>
						</view>
					</view>
					
					<view class="application-info">
						<view class="info-item">
							<text class="label">申请时间：</text>
							<text class="value">{{ item.application_time }}</text>
						</view>
						<view class="info-item">
							<text class="label">预计开始：</text>
							<text class="value">{{ item.expected_start_date }}</text>
						</view>
						<view class="info-item">
							<text class="label">租期：</text>
							<text class="value">{{ item.expected_duration }} 个月</text>
						</view>
					</view>
					
					<view class="item-footer">
						<button 
							class="cancel-btn" 
							v-if="item.status === '待初审' || item.status === '初审通过'"
							@click.stop="cancelApplication(item)"
						>取消申请</button>
						<button 
							class="contract-btn" 
							v-if="item.status === '初审通过'"
							@click.stop="fillContract(item)"
						>填写合同</button>
						<button 
							class="detail-btn" 
							@click.stop="viewApplicationDetail(item)"
						>查看详情</button>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image class="empty-image" src="/static/icons/empty.png"></image>
				<text class="empty-text">暂无{{ tabs[currentTab].name }}的申请</text>
				<button class="add-btn" @click="goToHousingList">去查看房源</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签页
				tabs: [
					{ name: '全部', status: '', count: 0 },
					{ name: '待初审', status: '待初审', count: 0 },
					{ name: '初审通过', status: '初审通过', count: 0 },
					{ name: '待复审', status: '待复审', count: 0 },
					{ name: '已通过', status: '审核通过', count: 0 },
					{ name: '已驳回', status: '审核驳回', count: 0 }
				],
				currentTab: 0,
				
				// 数据
				applications: [],
				
				// 用户信息
				userInfo: null
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo()
			
			// 加载申请列表
			this.loadApplications()
		},
		onShow() {
			// 每次显示页面时刷新数据
			this.loadApplications()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					// 未登录跳转到登录页
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			},
			
			// 加载申请列表
			loadApplications() {
				uni.showLoading({
					title: '加载中'
				})
				
				// 构建查询参数
				let url = 'http://localhost:8000/api/services/my-leasing-applications/'
				if (this.tabs[this.currentTab].status) {
					url += `?status=${this.tabs[this.currentTab].status}`
				}
				
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							this.applications = res.data.data.list
							
							// 更新各状态数量
							this.updateTabCounts(res.data.data.total)
						} else {
							uni.showToast({
								title: res.data.message || '获取申请列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('获取申请列表失败', err)
						uni.showToast({
							title: '获取申请列表失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 更新标签页数量
			updateTabCounts(total) {
				// 全部标签页显示总数
				this.tabs[0].count = total
				
				// 获取各状态的数量
				uni.request({
					url: 'http://localhost:8000/api/services/my-leasing-applications/stats/',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							const stats = res.data.data
							
							// 更新各状态数量
							for (let i = 1; i < this.tabs.length; i++) {
								const status = this.tabs[i].status
								this.tabs[i].count = stats[status] || 0
							}
						}
					}
				})
			},
			
			// 切换标签页
			switchTab(index) {
				if (this.currentTab !== index) {
					this.currentTab = index
					this.loadApplications()
				}
			},
			
			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case '待初审':
						return 'status-pending'
					case '初审通过':
						return 'status-initial-approved'
					case '待复审':
						return 'status-review'
					case '审核通过':
						return 'status-approved'
					case '审核驳回':
						return 'status-rejected'
					case '已取消':
						return 'status-cancelled'
					default:
						return ''
				}
			},
			
			// 查看申请详情
			viewApplicationDetail(item) {
				// 将申请数据存储到本地
				uni.setStorageSync('currentApplicationDetail', item)
				
				// 跳转到详情页
				uni.navigateTo({
					url: '/pages/services/housing/application-detail?id=' + item.application_id
				})
			},
			
			// 取消申请
			cancelApplication(item) {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消该租赁申请吗？',
					success: (res) => {
						if (res.confirm) {
							this.doCancelApplication(item.application_id)
						}
					}
				})
			},
			
			// 执行取消申请
			doCancelApplication(id) {
				uni.showLoading({
					title: '取消中'
				})
				
				uni.request({
					url: `http://localhost:8000/api/services/leasing-applications/${id}/cancel/`,
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							uni.showToast({
								title: '申请已取消',
								icon: 'success'
							})
							
							// 重新加载数据
							this.loadApplications()
						} else {
							uni.showToast({
								title: res.data.message || '取消申请失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('取消申请失败', err)
						uni.showToast({
							title: '取消申请失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 填写合同
			fillContract(item) {
				// 将申请数据存储到本地
				uni.setStorageSync('currentHousingForContract', item)
				
				// 跳转到合同填写页面
				uni.navigateTo({
					url: '/pages/services/housing/contract?id=' + item.application_id
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 跳转到房源列表
			goToHousingList() {
				uni.navigateTo({
					url: '/pages/services/housing/list'
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F8F8F8;
	}
	
	.header {
		position: relative;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}
	
	.back-icon {
		position: absolute;
		left: 30rpx;
		font-size: 36rpx;
		color: #333333;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.tab-container {
		display: flex;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 28rpx;
		color: #666666;
		position: relative;
	}
	
	.tab-item.active {
		color: #007AFF;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #007AFF;
		border-radius: 2rpx;
	}
	
	.tab-badge {
		background-color: #FF5151;
		color: #FFFFFF;
		font-size: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		margin-left: 6rpx;
	}
	
	.application-list {
		padding: 20rpx;
	}
	
	.application-item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.application-id {
		font-size: 24rpx;
		color: #999999;
	}
	
	.application-status {
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.status-pending {
		color: #FF9800;
	}
	
	.status-initial-approved {
		color: #07C160;
	}
	
	.status-review {
		color: #FF5151;
	}
	
	.status-approved {
		color: #07C160;
	}
	
	.status-rejected {
		color: #FF5151;
	}
	
	.status-cancelled {
		color: #999999;
	}
	
	.housing-info {
		padding: 20rpx 0;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.housing-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.housing-detail {
		margin-top: 10rpx;
	}
	
	.detail-item {
		display: flex;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}
	
	.label {
		color: #999999;
		width: 120rpx;
	}
	
	.value {
		color: #333333;
		flex: 1;
	}
	
	.price {
		color: #FF5151;
		font-weight: bold;
	}
	
	.application-info {
		padding: 20rpx 0;
	}
	
	.info-item {
		display: flex;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}
	
	.item-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
	}
	
	.cancel-btn, .detail-btn, .contract-btn {
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
	}
	
	.cancel-btn {
		background-color: #F8F8F8;
		color: #666666;
		border: 1px solid #DDDDDD;
	}
	
	.contract-btn {
		background-color: #FF9800;
		color: #FFFFFF;
		border: 1px solid #FF9800;
	}
	
	.detail-btn {
		background-color: #F0F7FF;
		color: #007AFF;
		border: 1px solid #007AFF;
	}
	
	.empty-state {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}
	
	.add-btn {
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 35rpx;
	}
</style> 